<template>
  <div class="body1">
    <div class="login-wrap layout">
      <el-form class="login-container1 blur-element">
        <h1 class="title" style="color: dimgray;">欢迎登录卡尔养车</h1>
        <el-tabs v-model="activeName" style="margin-top: 10px;">
          <el-tab-pane label="账号密码登录" name="first">
            <el-form-item label="">
              <el-input type="text" v-model="user.userPhone" placeholder="登录账号" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input type="password" v-model="user.userPass" placeholder="登录密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" id="btn1" style="width:100%;" @click="login()" plain>登录</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="验证码登录" name="second">
            <el-form-item label="">
              <el-input type="text" v-model="userCode.userPhone" placeholder="登录手机号码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input type="password" v-model="userCode.code" placeholder="验证码" autocomplete="off"
                style="width: 50%;"></el-input>
              <el-button plain type="primary" style="width: 40%; float: right;" @click="sendLoginMessage()"
                :loading="loading">发送验证码</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" id="btn2" style="width:100%;" @click="codeLogin()" plain>登录</el-button>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default { //暴露
    name: "userlogin",
    data() {
      return {
        activeName: 'first',
        message: "",
        user: {//账号密码登录参数对象
          userPhone: "",//手机号
          userPass: ""//密码
        },
        userCode: {//账号验证码登录参数对象
          userPhone: "",//手机号
          code: ""//验证码
        },
        loading: false,
        backgroundUrl:"",
      }
    },
    methods: {
      //账号密码登录
      login() {
        this.$http.post("/person/userInfo/userLogin", this.user).then(resp => {
          if (resp.data.code == 200) {
            this.$router.push("/usermain")
            alert("登录成功")
            sessionStorage.setItem("userId", JSON.stringify(resp.data.data.userId))
          } else {
            this.$message.error(resp.data.message);
          }
        })
      },
      //发送验证码
      sendLoginMessage() {
        if (this.userCode.userPhone == "") {
          this.$message.error("请先输入手机号码");
        } else if (this.userCode.userPhone.length != 11) {
          this.$message.error("手机号码长度有误");
        } else {
          this.$http.get("/person/userInfo/sendCheckMessage", {
            params: {
              phone: this.userCode.userPhone
            }
          }).then(resp => {
            if (resp.data.flag) {
              this.SuccessTip(resp.data)
              this.loading = !this.loading;
              setTimeout(() => {
                this.loading = !this.loading;
              }, 1000 * 60); // 60秒后再次改变loading状态
            } else {
              this.ErrorTip(resp.data)
            }
          })
        }
      },
      //验证码登录
      codeLogin() {
        if (this.userCode.code == "") {
          this.$message.error("请输入验证码");
        } else {
          this.$http.post("/person/adminInfo/adminCodeLogin", this.userCode).then(resp => {
            if (resp.data.code == 200) {
               this.$router.push("/usermain")
              sessionStorage.setItem("uId", JSON.stringify(resp.data))
              this.SuccessTip(resp.data)
            } else {
              this.ErrorTip(resp.data)
            }
          })
        }

      },
     SuccessTip(data) { //成功
       if (data.code === 200) {
         // 如果code为200，则弹出绿色的提示框
         this.$message({
                   message: data.msg,
                   type: 'success'
                 });
       }
     },
     ErrorTip(data) { //失败
       if (data.code !== 200) {
         // 如果code为200，则弹出绿色的提示框
         this.$message({
                   message: data.msg,
                   type: 'error'
                 });
       }
     },
           }
  };
</script>

<style>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    /* background-image: url(../../static/book.jpg); */
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }

  .login-container1 {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 40px 45px 25px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

.blur-element {
  background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 背景模糊 */
  -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
}
  .body1 {
    background-color: #DCDCDC;
    background-position: center;
    background-image: url(https://aliyunfyl.oss-cn-chengdu.aliyuncs.com/backgroud1.jpg);
  background-size: cover;
  }
  .layout {
    height: 100vh;

  }

  h2 {
    font-size: 14px;
    color: red;
    float: left;
    margin-right: 5px;
  }

  * {
    margin: 0px;
    padding: 0px;
  }

  a {
    text-decoration: none;
    color: blue;
  }

  .login-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: white;
    color: black;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    width:100%;
  }

  .login-button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /* 控制白色底部距离登录按钮底部的距离 */
    width: 100%;
    height: 5px; /* 白色底部的高度 */
    background-color: white;
    opacity: 0.8; /* 控制透明度 */
    z-index: -1;
  }

</style>
